<!--
 * @Author: ljc
 * @Date: 2024-12-02 17:41:23
 * @LastEditors: g05047
 * @LastEditTime: 2025-01-17 09:09:42
 * @Description: 分类表单
-->
<template>
  <div>
    <el-form ref="categoryRef"
      class="rk-form"
      :model="form"
      :rules="rules"
      label-width="auto">
      <el-row class="mb20">
        <el-col :span="24">
          <el-form-item label="父级">
            <rk-tree-select style="width: 100%"
              :disabled="!!props.guid"
              v-model="form.superguid"
              :showCode="false"
              placeholder="请选择父级"
              :props="{ label: 'name',value: 'guid' }"
              :server="{
                url: '/classify/getSysClassifyTree',
                method: 'post',
                data: { type: funcType }// type: 1-表单 2-流程
              }"
              @change="handleTreeChange">
            </rk-tree-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="24">
          <el-form-item label="名称"
            prop="name">
            <el-input v-model="form.name"
              placeholder="请输入名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col v-if="tempForm.parentCode"
          :span="20">
          <el-form-item label="编码">
            <el-input disabled
              v-model="tempForm.parentCode">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="tempForm.parentCode ? 4 : 24">
          <el-form-item :label="tempForm.parentCode ? '' : '编码'"
            prop="code">
            <el-input :disabled="!!props.guid"
              v-model="form.code"
              placeholder="请输入编码">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row class="mb20">
        <el-col :span="24">
          <el-form-item label="有效">
            <el-switch active-value="1"
              inactive-value="0"
              v-model="form.status" />
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row class="mb20">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="form.remark"
              maxlength="60"
              show-word-limit
              :autosize="{ minRows: 2, maxRows: 8 }"
              type="textarea"
              placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup>
import { useCategoryApi } from '@/api';
import { reactive } from 'vue';
const { getSysClassifyInfo } = useCategoryApi()
const props = defineProps({
  guid: {
    type: String,
    default: ''
  },
  funcType: {
    type: String,
    default: '1'
  },
})
const categoryRef = ref(null)
let form = reactive({
  // status: '0',
  superguid: '',
  name: '',
  code: '',
  remark: '',
  functype: props.funcType,
  guid: '',
})
const tempForm = reactive({
  parentCode: '',
})
const validateNumber = (rule, value, callback) => {
  const regex = /^(0[1-9]|[1-9]\d)$/;
  if (!regex.test(value)) {
    callback(new Error('请输入01-99的数字'));
  } else {
    callback();
  }
}
const rules = reactive({
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入编码', trigger: 'blur' },
    { validator: validateNumber, trigger: 'blur' }

  ],
})

/**
 * 树选择变化事件
 */
const handleTreeChange = (value, item) => {
  const { code } = item
  tempForm.parentCode = code
}
/**
 * 获取表单数据
 */
const loadFormData = async () => {
  const { code, msg, data } = await getSysClassifyInfo(props.guid)
  if (code === 200) {
    // const { name, code, status,superguid, remark, functype, guid, parentCode } = data
    const { name, code, superguid, remark, functype, guid, parentCode } = data
    const tempCode = parentCode != null && parentCode != '' ? code.replace(parentCode, '') : code
    // Object.assign(form, { name, code: tempCode, superguid, status,remark, functype, guid, });
    Object.assign(form, { name, code: tempCode, superguid, remark, functype, guid, });
    Object.assign(tempForm, { parentCode, });
  } else {
    console.error(msg)
  }
}
/** 获取表单数据 */
const getFormData = async () => {
  let code = tempForm.parentCode != null && tempForm.parentCode != '' ? tempForm.parentCode + form.code : form.code
  let resultData = {}
  const valid = await validateForm();
  if (valid) {
    resultData = {
      ...form,
      code,
    }
  }
  return resultData
}
/** 表单校验 */
const validateForm = async () => {
  if (!categoryRef.value) return false
  return await categoryRef.value.validate()
}
onMounted(() => {
  if (props.guid) {
    loadFormData()
  }
})

defineExpose({
  getFormData,
})
</script>
<style lang="scss" scoped>
</style>
